import useInitVariable from '@/hooks/useInitVariable'
import useSelectBorder from '@/store/useSceneData'
import { PlayCircleOutlined, SettingOutlined } from '@ant-design/icons'
import { useReactFlow } from '@xyflow/react'
import { Button, Dropdown, MenuProps, message, Space } from 'antd'
import _ from 'lodash'
import { ReactNode } from 'react'


interface Props {
    children: ReactNode
    nodeId: string
    showRun?: boolean
    onClick?: () => void
    onClickRun?: () => void
}

export default function NodeOperation(props: Props) {
    const { nodeId, children, onClick, showRun = false, onClickRun } = props
    const { setNodes, setEdges } = useReactFlow();
    const { deteleVariable } = useInitVariable()
    const { nodeConfig, setNodeConfig, clearNodeConfig } = useSelectBorder()

    const items: MenuProps['items'] = [
        {
            key: '1',
            label: <div className='w-[120px]' onClick={() => {
                setNodes((nodes) => {
                    return nodes.filter(node => node.id !== nodeId)
                })
                setNodes((node) => node.filter((e) => e.id !== nodeId));
                setEdges((es) =>
                    es.filter(
                        (e) =>
                            e.target !== nodeId && e.source !== nodeId
                    )
                );
                deteleVariable(nodeId)
            }}>删除节点</div>,
        },
        {
            key: '2',
            label: <div onClick={() => {
                setNodes((nodes) => {
                    const node = nodes.find(node => node.id === nodeId)
                    if (!node) return nodes
                    const newNode = _.cloneDeep(node)
                    newNode.position.x += 50
                    newNode.position.y += 50
                    newNode.id = parseInt(Math.random() * 1000000000 + "") + ""
                    return [...nodes, newNode]
                })
            }}>复制节点</div>,
        }
    ];

    return (
        <div className='hover:shadow-lg rounded-[12px] relative shadow-md w-full h-full'
            onMouseEnter={() => setNodeConfig(nodeId)}
            onMouseLeave={() => clearNodeConfig()}
        >
            <div className='absolute top-[-40px]'
                style={{ height: 100, width: 220, display: nodeConfig[nodeId] ? "block" : "none", paddingTop: 0 }}
                onMouseEnter={() => setNodeConfig(nodeId)}
            >
                <Space>
                    <Dropdown trigger={['click']} menu={{ items }} placement="bottomLeft">
                        <Button className='rounded-lg font-bold text-[#485468]' style={{ border: 0 }}>...</Button>
                    </Dropdown>
                    <Button className='rounded-lg font-bold text-[#485468]'
                        onClick={onClick}
                        icon={<SettingOutlined />}
                        style={{ border: 0 }} />
                    {showRun && <Button className='rounded-lg font-bold text-[#485468]'
                        onClick={onClickRun}
                        icon={<PlayCircleOutlined />}
                        style={{ border: 0 }} />}
                </Space>
            </div>
            {children}
        </div>
    )
}
